<template>
  <div class="app-container">
    <el-form :inline="true" :model="order" class="demo-form-inline">
      <el-form-item label="教师名称">
        <el-input v-model="order.name" clearable placeholder="教师名称" />
      </el-form-item>
      <el-form-item label="授课状态">
        <el-select v-model="order.states" placeholder="选择授课状态" clearable>
          <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value" /></el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="addad('ruleForm')">添加教师</el-button>
      </el-form-item>

    </el-form>
    <el-table
      id="out-table"
      class="el-table"
      border
      :data="orderList.list"
      style="width: 98%;"
    >
      <el-table-column
        align="center"
        type="index"
        width="50"
      />
      <el-table-column
        align="center"
        prop="name"
        label="教师名称"
        width="270"
      />
      <el-table-column
        align="center"
        prop="typeIntroduce"
        label="教师类型"
        width="180"
      />
      <el-table-column
        align="center"
        prop="phone"
        label="手机号"
        width="220"
      />
      <el-table-column
        align="center"
        prop="jobTime"
        label="从业时间"
        width="280"
      />
      <el-table-column
        align="center"
        prop="states"
        label="授课状态"
        width="180"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.states===0"
            type="success"
            disable-transitions
          >正常
          </el-tag>
          <el-tag
            v-if="scope.row.states===1"
            type="warning"
            disable-transitions
          >停用
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            plain
            size="mini"
            @click="getOrderInfo(scope.row.id)"
          >查看详情
          </el-button>
          <el-button
            id="sty4"
            plain
            size="mini"
            class="ml-1"
            @click="changed(scope.row.id)"
          ><span>修改</span></el-button>
          <el-popconfirm
            title="确定删除该教师吗？"
            @onConfirm="del(scope.row.id)"
          >
            <el-button
              id="sty3"
              slot="reference"
              type="danger"
              size="mini"
              class="ml-1"
            >删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--    新增老师信息-->
    <el-dialog title="添加教师信息" width="40%" top="5vh" :visible.sync="dialogFormVisible" :before-close="handleClose1">
      <el-form ref="ruleForm" :rules="rules" label-position="right" label-width="80px" :model="form">
        <el-form-item label="教师名称" style="margin-bottom: 20px;width: 300px" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="教师介绍" style="margin-bottom: 20px;width: 500px" :label-width="formLabelWidth" prop="introduce">
          <el-input v-model="form.introduce" type="textarea" autocomplete="off" />
        </el-form-item>
        <el-form-item label="教师类型" style="width: 300px" :label-width="formLabelWidth" prop="typeIntroduce">
          <el-input v-model="form.typeIntroduce" autocomplete="off" />
        </el-form-item>
        <el-form-item label="从业时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.jobTime"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="标签称号" :label-width="formLabelWidth">
          <el-tag
            v-for="tag in form.tags"
            :key="tag"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-if="inputVisible"
            ref="saveTagInput"
            v-model="inputValue"
            class="input-new-tag"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button style="margin-right: 10px" class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
        </el-form-item>
        <el-form-item label="手机号码" style="width: 300px" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="80px">
        <el-form-item
          label="教学经验"
        >
          <div v-for="(item, index) in form.experiences" :key="index" class="mb-1">
            <el-input v-model="form.experiences[index]" style="width: 200px;" />
            <el-button type="danger" class="ml-1" @click="deleteItem(item, index)">删除</el-button>
          </div>
          <el-button @click="addItem">增加</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查看详情弹窗-->
    <el-dialog title="教师详情" width="40%" top="5vh" :visible.sync="dialogFormVisible3">
      <el-form label-position="right" label-width="80px">
        <el-form-item label="教师名称" style="margin-bottom: 20px;width: 300px" :label-width="formLabelWidth" prop="name">
          <el-input v-model="OrderInfo.name" autocomplete="off" :disabled="true" />
        </el-form-item>
        <el-form-item label="教师介绍" style="margin-bottom: 20px;width: 500px" :label-width="formLabelWidth" prop="price">
          <el-input v-model="OrderInfo.introduce" type="textarea" autocomplete="off" :disabled="true" />
        </el-form-item>
        <el-form-item label="教师类型" style="width: 300px" :label-width="formLabelWidth">
          <el-input v-model="OrderInfo.typeIntroduce" autocomplete="off" :disabled="true" />
        </el-form-item>

        <el-form-item label="从业时间" :label-width="formLabelWidth" prop="inventory">
          <el-date-picker
            v-model="OrderInfo.jobTime"
            type="date"
            :disabled="true"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="标签称号" :label-width="formLabelWidth" prop="inventory">
          <el-tag
            v-for="tag in OrderInfo.tags"
            :key="tag"
            :disable-transitions="false"
            :disabled="true"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
        </el-form-item>
        <el-form-item label="手机号码" style="width: 300px;" :label-width="formLabelWidth" prop="inventory">
          <el-input v-model="OrderInfo.phone" autocomplete="off" :disabled="true" />
        </el-form-item>
        <el-form-item label="授课状态">
          <template>
            <el-tag
              v-if="OrderInfo.states===0"
              type="success"
              disable-transitions
            >正常
            </el-tag>
            <el-tag
              v-if="OrderInfo.states===1"
              type="warning"
              disable-transitions
            >停用
            </el-tag>
          </template>
        </el-form-item>
        <el-form-item label="教学经验" :label-width="formLabelWidth" prop="inventory" :disabled="true">
          <el-tag
            v-for="tag in OrderInfo.experiences"
            :key="tag"
            :disable-transitions="false"
            @close="handleClose2(tag)"
          >
            {{ tag }}
          </el-tag>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible3 = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog top="7vh" title="修改教师信息" width="35%" :visible.sync="dialogFormVisible1" :before-close="handleClose1" @click="changed">
      <el-form ref="ruleForm" label-position="right" label-width="80px" :model="form">
        <el-form-item label="教师名称" style="margin-bottom: 20px;width: 300px" :label-width="formLabelWidth" prop="name">
          <el-input v-model="shopdata.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="教师介绍" style="margin-bottom: 20px;width: 500px" :label-width="formLabelWidth" prop="price">
          <el-input v-model="shopdata.introduce" type="textarea" autocomplete="off" />
        </el-form-item>
        <el-form-item label="教师类型" :label-width="formLabelWidth" style="width: 300px">
          <el-input v-model="shopdata.typeIntroduce" autocomplete="off" />
        </el-form-item>
        <el-form-item label="从业时间" :label-width="formLabelWidth" prop="inventory">
          <el-date-picker
            v-model="shopdata.jobTime"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="标签称号" :label-width="formLabelWidth" prop="inventory">
          <el-tag
            v-for="tag in shopdata.tags"
            :key="tag"
            closable
            :disable-transitions="false"
            @close="handleClose4(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-if="inputVisible"
            ref="saveTagInput"
            v-model="inputValue"
            class="input-new-tag"
            size="small"
            @keyup.enter.native="handleInputConfirm4"
            @blur="handleInputConfirm4"
          />
          <el-button v-else class="button-new-tag" size="small" @click="showInput4">+ New Tag</el-button>
        </el-form-item>
        <el-form-item label="手机号码" style="width: 300px" :label-width="formLabelWidth" prop="inventory">
          <el-input v-model="shopdata.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="授课状态">
          <el-select v-model="shopdata.states" type="string" :label-width="formLabelWidth">
            <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="80px">
        <el-form-item
          label="教学经验"
        >
          <div v-for="(item, index) in shopdata.experiences" :key="index" class="mb-1">
            <el-input v-model="shopdata.experiences[index]" style="width: 200px;" />
            <el-button type="danger" class="ml-1" @click="delshopdataItem(item, index)">删除</el-button>
          </div>
          <el-button @click="addshopdataItem">增加</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel1">取 消</el-button>
        <el-button type="primary" @click="commit">修 改</el-button>
      </div>
    </el-dialog>
    <!-- 分页-->
    <el-pagination
      background
      :current-page="orderList.pageNum"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="orderList.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="handlePrevClick"
      @next-click="handleNextClick"
    />
  </div>

</template>

<script>
import { TeacherList, addTeacher, updateTeacher, TeacherInfo, removeTeacher } from '@/api/teacher'
export default {
  name: 'Teacher',
  data() {
    return {
      rules: {
        introduce: [
          { required: true, trigger: 'blur', message: '教师介绍不能为空' },
          { trigger: 'blur' }
        ],
        name: [
          { required: true, message: '教师名称', trigger: 'blur' },
          { trigger: 'blur' }
        ],
        typeIntroduce: [
          { required: true, message: '类型介绍不能为空', trigger: 'blur' },
          { trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { trigger: 'blur' }
        ]
      },
      input: '',
      order: {
        states: '',
        name: ''
      },
      inputVisible: false,
      inputValue: '',
      inputVisible1: false,
      inputValue1: '',
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogTableVisible1: false,
      dialogFormVisible1: false,
      formLabelWidth: '80px',
      orderList: [],
      pageNum: 1,
      pageSize: 10,
      dialogFormVisible3: false,
      options: [{
        value: 0,
        label: '正常'
      }, {
        value: 1,
        label: '停用'
      }],
      shopdata: '',
      OrderInfo: '',
      form: {
        name: '',
        introduce: '',
        experiences: [],
        typeIntroduce: '',
        jobTime: '',
        tags: [],
        phone: '',
        states: ''
      }
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    addItem() {
      this.form.experiences.push('')
      console.log(this.form.experiences.length)
    },
    addshopdataItem() {
      this.shopdata.experiences.push('')
    },
    delshopdataItem(item, index) {
      this.shopdata.experiences.splice(index, 1)
    },
    deleteItem(item, index) {
      this.form.experiences.splice(index, 1)
    },
    // 修改回显
    changed(id) {
      const data = {
        id: id
      }
      TeacherInfo(data).then(res => {
        if (res.success) {
          this.shopdata = res.dataMap
          this.dialogFormVisible1 = true
        }
      })
      this.shopdata.name = ''
      this.shopdata.typeIntroduce = ''
      this.shopdata.jobTime = ''
      this.shopdata.tags = []
      this.shopdata.phone = ''
      this.shopdata.introduce = ''
      this.shopdata.experiences = []
    },
    // 修改提交
    commit() {
      for (var i = 0; i < this.shopdata.experiences.length; i++) {
        if (this.shopdata.experiences[i] === '') {
          this.$message('请填写完整信息')
          return
        }
      }
      for (var l = 0; l < this.shopdata.tags.length; l++) {
        if (this.shopdata.tags[l] === '') {
          this.$message('请填写完整信息')
          return
        }
      }
      if (this.shopdata.name === '' || this.shopdata.introduce === '' || this.shopdata.experiences === [] || this.shopdata.typeIntroduce === '' || this.shopdata.jobTime === '' ||
        this.shopdata.tags === [] || this.shopdata.phone === '') {
        this.$message('请填写完整信息')
        return
      } else {
        updateTeacher(this.shopdata).then(res => {
          console.log(res)
          if (res.success) {
            console.log(res)
            this.dialogFormVisible1 = false
            this.getOrderList()
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          } else {
            this.$message.error('操作失败')
          }
        })
      }
    },
    // 转化日期
    getTime(time) {
      var date = new Date(time)
      var y = date.getFullYear()
      var m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      var d = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      return y + '-' + m + '-' + d
    },
    sure() {
      for (var i1 = 0; i1 < this.form.experiences.length; i1++) {
        if (this.form.experiences[i1] === '') {
          this.$message('请填写完整信息')
          return
        }
      }
      for (var i2 = 0; i2 < this.form.tags.length; i2++) {
        if (this.form.tags[i2] === '') {
          this.$message('请填写完整信息')
          return
        }
      }
      console.log(this.form.experiences)
      if (this.form.name === '' || this.form.introduce === '' || this.form.experiences === [] || this.form.typeIntroduce === '' || this.form.jobTime === '' ||
        this.form.tags === [] || this.form.phone === '') {
        this.$message('请填写完整信息')
        return
      } else {
        this.form.jobTime = this.getTime(this.form.jobTime)
        addTeacher(this.form).then(res => {
          console.log(res)
          if (res.success) {
            this.dialogFormVisible = false
            this.getOrderList()
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          } else {
            this.$message.error('操作失败')
          }
        })
      }
    },
    handleClose(tag) {
      this.form.tags.splice(this.form.tags.indexOf(tag), 1)
    },
    handleClose3(tag) {
      this.shopdata.experiences.splice(this.shopdata.experiences.indexOf(tag), 1)
    },
    handleClose4(tag) {
      this.shopdata.tags.splice(this.shopdata.tags.indexOf(tag), 1)
    },
    showInput3() {
      this.inputVisible1 = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm3() {
      const inputValue1 = this.inputValue1
      if (inputValue1) {
        this.shopdata.experiences.push(inputValue1)
      }
      this.inputVisible1 = false
      this.inputValue1 = ''
    },
    handleCancel1() {
      this.$refs.ruleForm.clearValidate()
      this.dialogFormVisible1 = false
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    showInput4() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm1() {
      const inputValue1 = this.inputValue1
      if (inputValue1) {
        this.form.experiences.push(inputValue1)
      }
      this.inputVisible1 = false
      this.inputValue1 = ''
    },
    handleClose2(tag) {
      this.form.experiences.splice(this.form.experiences.indexOf(tag), 1)
    },
    handleInputConfirm4() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.shopdata.tags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    showInput1() {
      this.inputVisible1 = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.form.tags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    handleClose1(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    addad() { // 新增
      this.dialogFormVisible = true
      this.form.name = ''
      this.form.typeIntroduce = ''
      this.form.jobTime = ''
      this.form.tags = []
      this.form.phone = ''
      this.form.introduce = ''
      this.form.experiences = []
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getOrderList()
      console.log(`当前页: ${val}`)
    },
    handlePrevClick() {
      this.pageNum--
      this.getOrderList()
    },
    handleNextClick() {
      this.pageNum++
      this.getOrderList()
    },
    handleSearch() {
      this.getOrderList()
    },
    getOrderInfo(id) {
      const data = {
        id: id
      }
      TeacherInfo(data).then(res => {
        console.log(res)
        this.OrderInfo = res.dataMap
        this.dialogFormVisible3 = true
      })
    },
    // 删除
    del(id) {
      const data = {
        teacherId: []
      }
      data.teacherId = []
      data.teacherId.push(id)
      console.log(data.teacherId)
      removeTeacher(data).then(res => {
        if (res.success) {
          this.getOrderList()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    // 获取老师列表
    getOrderList() {
      TeacherList(this.order, this.pageNum, this.pageSize).then(res => {
        console.log(res)
        this.orderList = res.dataMap
        for (var i = 0; i < this.orderList.list.length; i++) {
          this.orderList.list[i].jobTime = this.getTime(this.orderList.list[i].jobTime)
        }
      })
    }

  }
}

</script>
<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.productImage{
  width: 60px;
  height: 60px;
  border-radius: 5px;
}
.el-select .el-input {
  width: 130px;
}
.el-dialog__body{
  padding:30px 40px;
}
.app-container{
  margin-top: 10px;
}
.el-pagination {
  float: right;
  margin: 10px 30px;
}
.el-table {
  margin: 10px 0px;
}
</style>

